@use "@/assets/variables" as *;

/**
 * widget 专用的样式
 * ----------------------
 * 针对 widget 设计的样式，这些样式设计，在其它地方没什么用。
 *
 * widget 还依赖于 assets 目录下所有样式设计。
 */

/**
 * 表格以及分页
 * ----------------------
 */
.sea-table {
    gap: 10px;
    padding: 12px;

    display: flex;
    flex-direction: column;

    .sea-table-header {
    }

    /** 标题栏沿基线对齐，保持 10px 间距 */
    .sea-table-title {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: baseline;
        margin-bottom: 6px;
        min-height: 32px;
    }

    .sea-table-body {
    }

    .sea-table-footer {
    }
}

/** 行内输入框，缩小外边框 */
.el-table__body {
    .el-form-item {
        margin-bottom: 6px !important;
    }
}


/** 行内输入框，缩小外边框 */
.sea-table-input-row {
    padding: 0 !important;

    .cell {
        //padding: 0 !important;
    }
}

.sea-table-input-cell {
    /** 行内输入框，取消边框 */
    > .el-input__wrapper {
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    /** 行内下拉框，取消边框 */
    > .el-select__wrapper {
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
}

/** 行内输入框，检验失败 */
.sea-form-error {
    color: $sea-color-red;
    font-size: $sea-font-size-small;
}

/**
 * 三角形角标
 * -----------------------------------------------
 * 关联组件：sea-mark-triangle.vue
 */
.sea-mark-triangle {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 16px;
    color: $sea-color-white;
}

/**
 * searchbar
 * -------------------------
 * 便捷搜索栏，依赖于 el-input 的基础样式，调整之后可以做成独立产品
 */
.sea-searchbar {
    input {
        box-shadow: none !important;
        padding-left: 6px;
        color: $sea-color-gray-light-7;
        background-color: $sea-color-gray;

        &::placeholder {
            color: $sea-color-gray-light-7;
        }

        &:focus,
        &:focus::placeholder,
        &:focus + .el-input-group__append,
        + .el-input-group__append:hover {
            color: $sea-color-gray;
            background-color: $sea-color-white;
        }
    }

    .el-input-group__append {
        box-shadow: none !important;
        color: $sea-color-gray-light-7;
        background-color: $sea-color-gray;
    }

    &:hover {
        input,
        input::placeholder,
        .el-input-group__append {
            color: $sea-color-gray;
            background-color: $sea-color-white;
        }
    }
}


/**
 * 网络或其他异常
 * ------------------------------------------------------------------
 * ajax 封装中触发的异常，给 div 增加一层遮罩
 */
$sea-error-ajax-content: '网络或其他异常!';
.error-ajax {
    /* 为伪元素定位提供上下文，特定场合可能会破坏布局 */
    position: relative;

    &::before {
        content: $sea-error-ajax-content;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;

        color: $sea-text-color-regular;
        background-color: $sea-color-white;

        display: flex;
        align-items: center;
        justify-content: center;
    }
}



/**
 * 下拉按钮组
 * -------------------------------------------------------
 * 主要为了兼容按钮组
 */
.sea-dropdown-button {
    padding: 0;
    border: 1px solid lightgray
}

.sea-dropdown-button > button {
    border: 0;
    height: 30px;
}
